<template>
    <div class="app-middle">
      <div class="app-top">
        <div class="app-search" @click="search">
          玩具
        </div>
        <van-tabs @click="onClick">
          <van-tab
            v-for="(index, key) in list"
            :title="index"
            :key="key"
          ></van-tab>
        </van-tabs>
      </div>
      <div class="top">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(val, key) in images" :key="key">
            <div class="app-shuffing">
            <img :src="val" alt="#">
              </div>
          </van-swipe-item>
        </van-swipe>
      </div>
<!--      轮播-->
      <div class="app-banner">
        <div class="wings">
          <div class="left"></div>
          <div class="right"></div>
        </div>
      </div>
<!--      列表-->
      <div class="app-menu">
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155745615565685465.png" alt="#">
          </div>
          <div>每日签到</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155745620576685615.png" alt="#">
          </div>
          <div>一元邀新</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155745633201413553.png" alt="#">
          </div>
          <div>砍价团</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155745634336643149.png" alt="#">
          </div>
          <div>一分好礼</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155367739181460729.png" alt="#">
          </div>
          <div>拼购国际</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155849473466877746.png" alt="#">
          </div>
          <div>8.8包邮</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155745638811844821.png" alt="#">
          </div>
          <div>食品超市</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155911181443788272.gif" alt="#">
          </div>
          <div>母婴馆</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155298317461154674.png" alt="#">
          </div>
          <div>生活家电</div>
        </div>
        <div class="app-menu_box">
          <div class="img">
            <img src="./icons/155745636672018807.png" alt="#">
          </div>
          <div>特色馆</div>
        </div>
      </div>
      <div class="app-today">
        <div class="app-today_top">
          <span class="app-today_left">今日必拼</span>
          <span>时间</span>
          <span class="app-today_right" @click="today">更多</span>
        </div>
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <div class="app-today_data">
              <div class="img" v-for="(val, key) in todayImages" :key="key">
                <img :src="val" alt="#">
                <div class="app-today_todayMoney">
                  <span class="app-today_color">拼</span>
                  <span>￥</span>
                  <span v-text="todayMoney" class="app-today_size"></span>
                </div>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="app-today_data">
              <div class="img" v-for="(val, key) in todayImages" :key="key">
                <img :src="val" alt="#">
                <div class="app-today_todayMoney">
                  <span class="app-today_color">拼</span>
                  <span>￥</span>
                  <span v-text="todayMoney" class="app-today_size"></span>
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="app-listSimplicity">
        <div class="app-listSimplicity_top">
          热拼榜
        </div>
        <div class="app-listSimplicity_details">
          <div class="app-listSimplicity_box" v-for="(val, key) in detailsImg" :key="key">
            <div class="img">
              <img :src="val" alt="#">
            </div>
            <div class="title" v-text="detailsText"></div>
            <div class="buyNumber" v-text="buyNumber + `万+人次购买`"></div>
          </div>
        </div>
      </div>
      <div class="app-selectHot">
        精选热卖
      </div>
      <div class="app-hotDetails">
        <div v-for="(val, key) in hotDetails"
             :key="key" @click="details(key)"
             class="app-hotDetails_box">
          <div class="img">
            <img :src="val.image" alt="#">
          </div>
          <div class="hotDetails_data">
            <p class="title">{{val.word}}</p>
            <div class="advantages">
              <span v-text="val.word_1"></span>
              <span>丨</span>
              <span v-text="val.word_2"></span>
              <span>丨</span>
              <span v-text="val.word_3"></span>
            </div>
            <div class="preferential">
              满十用一
            </div>
            <div v-text="`已拼` + val.number + `万件`" class="haveBuy"></div>
            <div class="money">
              <span>￥</span>
              <span v-text="val.money" class="prices"></span>
              <span class="buyNow">立即开拼</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'hot',
  data() {
    return {
      images: [],
      todayImages: [],
      todayMoney: '',
      detailsImg: [],
      detailsText: '',
      buyNumber: '',
      hotDetails: [],
      list: [
        '精选',
        '食品',
        '母婴',
        '家居',
        '女装',
        '生活',
        '食品',
        '母婴',
        '家居',
        '女装',
        '生活',
      ],
      index: -1,
    };
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this.$http._image()
      .then((res) => {
        this.images = res.data.image;
      });
    // eslint-disable-next-line no-underscore-dangle
    this.$http._todayData()
      .then((res) => {
        this.todayImages = res.data.image;
        this.todayMoney = res.data.money;
      });
    // eslint-disable-next-line no-underscore-dangle
    this.$http._details()
      .then((res) => {
        this.detailsImg = res.data.image;
        this.detailsText = res.data.word;
        this.buyNumber = res.data.number;
      });
    // eslint-disable-next-line no-underscore-dangle
    this.$http._commodity()
      .then((res) => {
        this.hotDetails = res.data.num;
      });
  },
  methods: {
    onClick(index) {
      this.index = index;
    },
    today() {
      this.$router.push({ path: '/today' });
    },
    details(key) {
      this.$router.push({ path: '/detail', query: this.hotDetails[key] });
    },
    search() {
      this.$router.push({ path: '/search' });
    },
  },
};
</script>
<style scoped lang="scss">
  .app-middle{
    /*margin-top: 275px;*/
    /*margin-bottom: 162px;*/
    .app-top {
      padding: 1px;
      width: 100vw;
      height: 275px;
      background: #eb6b62;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 999;
      .app-search {
        width: 1163px;
        line-height: 108px;
        background: #ffffff;
        border-radius: 40px;
        text-align: center;
        margin: 30px 35px;
      }
    }
    .top{
      margin-top: 100px;
    }
    .app-shuffing{
      width: 100vw;
      height: 353px;
      img{
        height: inherit;
        width: inherit;
        object-fit: cover;
      }
    }
    .app-banner{
      .wings{
        width: 100vw;
        height: 331px;
        box-sizing: border-box;
        overflow: hidden;
        .wings::after{
          display: block;
          clear: both;
          content: '';
        }
        .left{
          float: left;
          width: 50vw;
          height: 331px;
          background-color: orangered;
          background: url("./icons/left.png") no-repeat;
          background-size: 100%;
          box-sizing: border-box;
          animation: left 3s infinite;
        }
        .right{
          float: left;
          width: 50vw;
          height: 331px;
          background-color: blueviolet;
          background: url("./icons/right.png") no-repeat;
          background-size: 100%;
          box-sizing: border-box;
          animation: right 3s infinite;
        }
        @keyframes left {
          0% {
            transform: rotateY(0deg);
            transform-origin: right center;
            perspective: 201px;
          }
          50% {
            transform: rotateY(40deg);
            transform-origin: right center;
            perspective: 201px;
          }
          100% {
            transform: rotateY(0deg);
            transform-origin: right center;
            perspective: 201px;
          }
        }
        @keyframes right {
          0% {
            transform: rotateY(0);
            transform-origin: left center;
            perspective: 201px;
          }
          50% {
            transform: rotateY(-40deg);
            transform-origin: left center;
            perspective: 201px;
          }
          100% {
            transform: rotateY(0);
            transform-origin: left center;
            perspective: 201px;
          }
        }
      }
    }
    .app-menu{
      width: 1158px;
      height: 537px;
      background: white;
      border-radius: 35px;
      font-size: 0;
      margin: 0 auto;
      .app-menu_box{
        width: 20%;
        display: inline-block;
        font-size: 30px;
        text-align: center;
        .img{
          margin: 45px auto 20px;
          display: inline-block;
          width: 139px;
          height: 139px;
          img{
            width: inherit;
            height: inherit;
            object-fit: cover;
          }
        }
      }
    }
    .app-today{
      width: 1158px;
      height: 587px;
      border-top-right-radius: 36px;
      border-top-left-radius: 36px;
      background: white;
      margin: 30px auto 0;
      .app-today_top{
        position: relative;
        line-height: 142px;
        font-size: 50px;
        .app-today_left{
          width: 300px;
          font-weight: bolder;
          display: inline-block;
          text-indent: 90px;
          background: url("icons/flash.png") no-repeat 1.80645vw 2.889355vw;
          background-size: 70px;
        }
        .app-today_right{
          position: absolute;
          right: 43px;
          top: 0;
          width: 14.40323vw;
          background: url("icons/goToday.png") no-repeat 8.93548vw 2.80645vw;
          background-size: 70px;
          color: #818181;
        }
      }
      .app-today_data{
        margin: 5px  auto;
        width: 86.35484vw;
        height: 414px;
        font-size: 0;
        .img{
          width: 263px;
          height: 263px;
          display: inline-block;
          margin-right: 3px;
          img{
            height: inherit;
            width: inherit;
            border-radius: 15px;
            object-fit: cover;
          }
          .app-today_todayMoney{
            text-align: center;
            font-size: 30px;
            color: #e86b95;
            margin-top: 5px;
            .app-today_color{
              color: #828282;
            }
            .app-today_size{
              font-size: 40px;
              font-weight: bold;
            }
          }
        }
      }
    }
    .app-listSimplicity{
      width: 1162px;
      height: 570px;
      background: white;
      border-bottom-left-radius: 36px;
      border-bottom-right-radius: 36px;
      margin: 5px auto 0;
      .app-listSimplicity_top{
        line-height: 9.80645vw;
        width: 21.32258vw;
        background: url("icons/ranking.png") no-repeat 10px 1.80645vw;
        background-size: 5.62903vw;
        text-align: right;
        margin: 0 30px;
        font-size: 4.62903vw;
        font-weight: bold;
      }
      .app-listSimplicity_details{
        width: 1104px;
        height: 441px;
        margin: 0 auto;
        .app-listSimplicity_box{
          display: inline-block;
          width: 353px;
          height: 420px;
          border-radius: 20px;
          margin: 0 0.20968vw;
          border: 1px solid #f5d2ce;
          .img{
            width: 256px;
            height: 256px;
            margin: 15px auto;
            img{
              border-radius: 15px;
              height: inherit;
              width: inherit;
              object-fit: cover;
            }
          }
          .title{
            width: 262px;
            line-height: 68px;
            background: #fbe7e6;
            border-radius: 30px;
            margin: 0 auto;
            font-size: 35px;
            text-align: center;
            color: #ea5143;
          }
          .buyNumber{
            color: #818181;
            font-size: 32px;
            text-align: center;
          }
        }
      }
    }
    .app-selectHot{
      width: 100vw;
      line-height: 141px;
      color: #e75047;
      font-size: 54px;
      font-weight: bold;
      text-align: center;
      background: url("icons/star.png") no-repeat 34.80645vw 11px;
      background-size: 65px;
    }
    .app-hotDetails{
      .app-hotDetails_box{
        width: 1165px;
        height: 538px;
        border-radius: 35px;
        background: white;
        font-size: 0;
        margin: 0 auto 30px;
        .img,.hotDetails_data{
          display: inline-block;
          font-size: 35px;
          vertical-align: middle;
        }
        .img{
          margin: 35px;
          width: 446px;
          height: 446px;
          img{
            border-radius: 15px;
            width: inherit;
            height: inherit;
            object-fit: cover;
          }
        }
        .hotDetails_data{
          width: 615px;
          height: 464px;
          .title{
            font-size: 45px;
            font-weight: bold;
          }
          .advantages{
            line-height: 109px;
            span{
              color: #999999;
              font-size: 35px;
            }
          }
          .preferential{
            display: block;
            width: 170px;
            line-height: 60px;
            border-radius: 20px;
            background: #fbede4;
            font-size: 30px;
            text-align: center;
            color: #e06431;
          }
          .haveBuy{
            line-height: 107px;
            color: #969696;
          }
          .money{
            span{
              color: #e76a58;
              font-size: 32px;
            }
            .prices{
              font-size: 50px;
            }
            .buyNow{
              display: inline-block;
              width: 221px;
              line-height: 71px;
              background: #eb5642;
              font-size: 37px;
              color: white;
              text-align: center;
              border-radius: 30px;
              float: right;
            }
          }
        }
      }
    }
  }
</style>
